<template>
	<view>
		<view class="header">
			<view class="cn">
				设备列表
			</view>
			<view class="en">
				Equipment List
			</view>
		</view>

		<view class="equipment_list">
			<MyEquip v-for="(item, index) in equipments" :key="index" :imgUrl="item.imgUrl" :cn_name="item.cn_name"
				:en_name="item.en_name" :id="item.id" @equipmentclick="navigateto(item.id)"></MyEquip>
		</view>

		<view class="add_equipment" @click="goaddEquipment">
			+
		</view>
	</view>
</template>

<script>
	import MyEquip from './components/equip.vue'
	export default {
		data() {
			return {
				equipments: [{
						id: 0,
						imgUrl: 'https://img1.baidu.com/it/u=964227239,4068268093&fm=253&fmt=auto&app=120&f=JPEG?w=996&h=560',
						cn_name: '喷淋设备',
						en_name: 'Spary Equipment'
					},
					{
						id: 1,
						imgUrl: 'https://img2.baidu.com/it/u=3874514604,2281212316&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=312',
						cn_name: '环流风机',
						en_name: 'Circulation Fan'
					},
					{
						id: 2,
						imgUrl: 'https://img0.baidu.com/it/u=3067527106,3185361569&fm=253&fmt=auto&app=138&f=JPEG?w=480&h=335',
						cn_name: '照明设备',
						en_name: 'Lighting'
					},
					{
						id: 3,
						imgUrl: 'https://img0.baidu.com/it/u=3784915813,3672168700&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=372',
						cn_name: '大鹏设备',
						en_name: 'Film Rolling'
					},
					{
						id: 4,
						imgUrl: 'https://img1.baidu.com/it/u=964227239,4068268093&fm=253&fmt=auto&app=120&f=JPEG?w=996&h=560',
						cn_name: '遮阳设备',
						en_name: 'Sunshade Equipment'
					},
					{
						id: 5,
						imgUrl: 'https://img1.baidu.com/it/u=964227239,4068268093&fm=253&fmt=auto&app=120&f=JPEG?w=996&h=560',
						cn_name: '驱鸟器',
						en_name: 'Bird Scarer'
					},
				]
			}
		},
		methods: {
			navigateto(id) {
				uni.navigateTo({
					url: '/pages/equipment-detail/equipment-detail?id=' + id
				})
			},
			goaddEquipment() {
				uni.navigateTo({
					url: '/pages/add_equipment/add_equipment'
				})
			}
		},
		components: {
			MyEquip
		}
	}
</script>

<style lang="less">
	.header {
		height: 210rpx;
		color: #fff;
		box-sizing: border-box;
		padding-top: 80rpx;
		padding-left: 25rpx;
		background-color: #2971cd;

		.cn {
			font-size: 44rpx;
			font-weight: 700;
			letter-spacing: 5rpx;
		}

		.en {
			font-size: 28rpx;
			margin-top: 20rpx;
		}
	}

	.equipment_list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		margin-top: 15rpx;
	}

	.add_equipment {
		position: absolute;
		left: 50%;
		bottom: 50rpx;
		transform: translateX(-50%);
		width: 80rpx;
		height: 80rpx;
		background-color: #0074b6;
		border-radius: 50%;
		color: #fff;
		font-size: 60rpx;
		text-align: center;
		line-height: 75rpx;
	}
</style>
